{% extends '__base.tpl' %}
{% block head %}
<title>编程达人 {{data.onlineDetail.name}}</title>
<meta name="keywords" content="编程达人线上学习,线上培训,{{data.onlineDetail.name}}" />
<meta name="description" content="{{data.onlineDetail.name}}"/>
<!-- build:css -->
<link rel="stylesheet" type="text/css" href="../../../public/css/page/DPlayer.min.css" />
<link rel="stylesheet" type="text/css" href="../../../public/css/page/contentPage.css" />
<link rel="stylesheet" type="text/css" href="../../../public/css/page/popup.css" />
<!-- endbuild -->
{% endblock %}
{% block body %}
<div id='box' class="video-box" data-comment_type="3" data-description="编程达人线上班-{{data.onlineDetail.name}}"
     data-title="编程达人线上班-{{data.onlineDetail.name}}">
   <!-- 线上班头部内容start-->
    <div id='content'>
        <div class="contHead">
            <h1>
                {{data.onlineDetail.name}}
                {%if data.onlineDetail.openIs%}
                <span class="fright btnStyleS openclass-icon">公开课</span>
                {%endif%}
                <span class="fright font15 mr10">
                    评分：
                    {% if data.onlineDetail.scoreCount%}
                    <span class="orange">{{(data.onlineDetail.scoreTotal/data.onlineDetail.scoreCount)|toFloat(1)}}</span>
                    {%else%}
                    <span class="orange">10</span>
                    {%endif%}
                </span>
            </h1>
        </div>
        <div class="video-body relative">
            <div id="openVideo" class="video-content center hide"
                 {% if data.onlineDetail|isBroadcast%} style="display: block" {%endif%}> <!--直播中-->
                <img class="vmiddle video-bg" src="{{data.onlineDetail.cover|imgPath}}">
                <div class="open-class-wrap">
                    <p>
                        <span>
                            <img class="vsub" width="30px" src="../../../public/images/icon_playing.gif" alt="playing">
                            正在直播
                        </span>
                    </p>
                    <a class="btnBlueM open-class-btn" target="_blank" href="{{data.onlineDetail.classRoomUrl}}">进入教室</a>
                </div>
            </div>
            <!--有公开课隐藏播放-->
            <div id="onlineVideo" data-openis= "{{ data.onlineDetail|isBroadcast }}"
                 data-advideourl="{{data.onlineDetail.adVideoUrl}}"
                 class="video-content  center{% if data.onlineDetail|isBroadcast %} hide {%endif%}" data-flag="onlineClass">
                <img class="vmiddle video-bg" src="{{data.onlineDetail.cover|imgPath}}">
                <ul id="barrage" class="barrage-box"></ul>
            </div>
            <div id="dplayer" class="video"></div>

            <ul class="left-nav">
                <li class="left-nav-item catalog-nav icon-catalog" id="catalog_nav"
                    onclick="BASE.ONLINE_CONTENT.toggleCatalog.call(this)">目录</li>
                <li class="left-nav-item icon-task"
                    onclick="BASE.ONLINE_CONTENT.scrollTo('online_details')">详情</li>
                <li class="left-nav-item icon-comment"
                    onclick="BASE.ONLINE_CONTENT.scrollTo('comment_nav')">评价</li>
            </ul>
            <div class="catalog-box" id="catalog">
                {%include '__online_catalog.html'%}
            </div>
        </div>
    </div>
    <!-- 线上班头部内容end-->
    <div class="lmessage">
        <div class="commentTag">
            <div class="teacher-box clearfix">
                <a class="fleft" target="_blank" href='/{{data.onlineDetail.memberId}}/userInfo.html'>
                    <span class="head-img-box">
                        <img class="head-img" src="{{data.onlineDetail.header|imgPath}}">
                    </span>
                    主讲人：
                    <span class="clo6">{{data.onlineDetail.nickName}}</span>
                </a>
                <span class="fleft" data-memberid="{{data.onlineDetail.memberId}}" id="notice">
                    <button class="btnStyleS ml20  hide"
                            onclick="BASE.COMMON.noticeToMember(this)"
                            data-memberid="{{data.onlineDetail.memberId}}">+ 关注</button>
                    <button class="btnStyleC ml20  hide"
                            onclick="BASE.COMMON.cancelNotice(this)"
                            data-memberid="{{data.onlineDetail.memberId}}">已关注</button>
                </span>

                <span class="ml20 fleft">
                    上课时间：
                    <span class="clo6">{{data.onlineDetail.beginTime|totime}}-{{data.onlineDetail.endTime|totime}}</span>
                </span>
                <span class="ml20 fleft mr20">
                    难度：
                    <span class="clo6">
                        {% if data.onlineDetail.grade==1 %}
                        入门
                        {% elif data.onlineDetail.grade==2 %}
                        基础
                        {% elif data.onlineDetail.grade==3 %}
                        中级
                        {% elif data.onlineDetail.grade==4 %}
                        高级
                        {% elif data.onlineDetail.grade==5 %}
                         项目实战
                        {%endif%}
                    </span>
                </span>
                <span class="social-share fleft"  data-initialized="true">分享：
                    {%include '__share1.html'%}
                </span>
                 <span class="fright">
                    <span class="font16">
                        当前报名人数：
                        <span class="orange">{{data.onlineDetail.enrollCount}}</span>
                    </span>
                     <a class="btnBlueM ml20" target="_blank"
                        href="javascript:;" onclick="BASE.ONLINE_CONTENT.initContactQQ();">报名咨询</a>
                </span>
            </div>
        </div> <!-- end commentTag-->
        <!--内容导航-->
        <div class="lmessageB tabs-nav">
            <span id="online_details" class="lmText">详情</span>
            <span >目录</span>
            <span id="comment_nav" onclick="BASE.COMMON.getCommentScore.call(this,1)">评价
                {%if data.onlineDetail.scoreCount %}
                    ({{data.onlineDetail.scoreCount}})
                {%endif%}
            </span>
            <span id="recommend">推荐</span>
            <div class="fright">
                <em class="font16 vmiddle">价格:</em>
                <em class="orange font20 vsub">
                    {% if data.onlineDetail.gold>0 or data.onlineDetail.price>0 %}
                    {%if data.onlineDetail.price>0%}
                     &yen;{{data.onlineDetail.price}}
                     {%endif%}
                     {% if data.onlineDetail.gold>0 and data.onlineDetail.price>0 %}/{%endif%}
                     {% if data.onlineDetail.gold %}
                     金币{{data.onlineDetail.gold}}
                     {%endif%}
                    {%else%}
                    免费
                    {%endif%}
                </em>
                {% if data.onlineDetail.gold>0 or data.onlineDetail.price>0 %}
                <button class="btnBlueM ml10" id="buyIs" onclick="BASE.ONLINE_CONTENT.buyOnlineClass(this)">购买</button>
                {%endif%}
               <!-- <button class="btnStyleBlue ml10">加入购物车</button>-->
            </div>
        </div>
        <!--内容-->
        <div class="tabs-con" style="height: auto">
            <!--课程介绍-->
            <div class="tabs1" style="display: block;">
                <ul class="video-profile vue-editor">
                    {% if data.onlineDetail.intro %}
                    <li class="mb30">
                        {{data.onlineDetail.intro|safe}}
                    </li>
                    {% else %}
                    <li class="mb30">
                        {% include '__no_data.html' %}
                    </li>
                    {% endif %}
                </ul>
            </div>
            <!--目录-->
            <div class="tabs2" style="display: none;">
                {% include '__online_catalog.html' %}
            </div>
            <!--评价-->
            <div class="tabs3 lmessageC" style="display: none;">
                <div id="commentScore">
                    <div class="btnStar-box">
                        <div class="btnStar">
                            思维敏捷
                            {% include '__starScore.html' %}
                        </div>
                        <div class="btnStar">
                            思路清晰
                            {% include '__starScore.html' %}
                        </div>
                        <div class="btnStar">
                            技艺娴熟
                            {% include '__starScore.html' %}
                        </div>
                        <div class="btnStar">
                            课程通透
                            {% include '__starScore.html' %}
                        </div>
                        <div class="btnStar">
                            趣味性强
                            {% include '__starScore.html' %}
                        </div>
                    </div>
                </div>
                <div class="mb10">
                    <textarea placeholder="写下你的评论..." maxlength="200" id="comment_content"></textarea>
                    <div class="mt10">
                        <label for="noNameIs">
                            <input type="checkbox" id="noNameIs" name="noNameIs" class="checkbox"/>是否匿名
                        </label>
                        <button class="btnBlueM fright mt5 mr10" onclick="BASE.COMMON.addCommentScore(this)">发送</button>
                    </div>
                </div>
                {% include '__comment_score_list.html' %}
                {% include '__page.html' %}
            </div>
            <!--推荐课程-->
            <div class="lmessageC tabs4" style="display: none;">
                {% include '__online_list.html' %}
            </div>
        </div>
    </div>

</div><!-- end box -->
{% endblock %}

{% block script %}
    {{ super() }}
<!-- build:js -->
    <script src='../../../public/js/page/plugin/nativepage.js'></script>
    <script src="../../../public/js/page/plugin/DPlayer.min.js"></script>
    <script src='../../../public/js/page/common/video.js'></script>
    <script src="../../../public/js/page/online/online_content.js"></script>
<!-- endbuild -->
{% endblock %}